<template>
  <div>
    <el-form :inline="true" :model="queryParams" class="demo-form-inline" @submit.native.prevent >
      <el-form-item label="标题:">
        <el-input v-model="queryParams.title" placeholder="模糊查询" @keypress.enter.native="sumbit"></el-input>
      </el-form-item>
      <el-button @click="sumbit" type="primary" icon="el-icon-search">查询</el-button>
     <router-link :to="{ name: 'blogEdit' }"><el-button icon="el-icon-plus" type="success">发布</el-button></router-link>
    </el-form>
    <div class="block">
      <!-- <div class="radio">
        <el-radio-group v-model="reverse">
          <el-radio :label="true">倒序</el-radio>
          <el-radio :label="false">正序</el-radio>
        </el-radio-group>
      </div> -->
      <el-timeline>
        <el-timeline-item
          :timestamp="blog.created"
          placement="top"
          v-for="blog in blogs"
        >
          <el-card @click="toDetail(blog.id)" class="card">
            <router-link
              :to="{ name: 'blogDetail', params: { blogId: blog.id } }"
            >
              <h4>{{ blog.title }}</h4>
              <p>{{ blog.description }}</p>
              <p>{{ blog.create }}</p>
            </router-link>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="page.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/api/request.js";

export default {
  data() {
    return {
      queryParams: {
        title: "",
      },
      total:50,
      currentPage4: 4,
      // reverse: true,
      // 分页对象
      page: {
        size: 10,
        current: 1,
      },
      blogs: {
        id: "",
        user_id: "",
        title: "",
        description: "",
        content: "",
        create: "",
        status: "",
      },
    };
  },
  methods: {
    // 模糊查询
    sumbit() {
      request.post("/blog/retrieveLike",this.queryParams).then((res) => {
      this.blogs=res.data.data
      });
    },
    handleSizeChange(displaySize) {
      (this.page.size = displaySize),
        request
          .post("/blog/retrievePage", JSON.stringify(this.page))
          .then((res) => {
            this.blogs = res.data.data.records;
          });
    },
    handleCurrentChange(displayCurrent) {
      this.page.current = displayCurrent;
      request
        .post("/blog/retrievePage", JSON.stringify(this.page))
        .then((res) => {
          this.blogs = res.data.data.records;
        });
    },
    //时间格式
    gettime() {
      var date = new Date("Wed Aug 17 2022 09:54:48 GMT+0800 (中国标准时间)");
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var min = date.getMinutes();
      min = min < 10 ? "0" + min : min;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      this.conversion_time1 =
        y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
    },
    async retriveAll() {
      const _this = this;
      const res = await request
        .post("/blog/retrievePage", JSON.stringify(this.page))
        .then((res) => {
          _this.blogs=res.data.data.records;
      _this.page.size=res.data.data.size;
      _this.page.current=res.data.data.current;
      _this.total=res.data.data.total;
        });
    },
  },
  mounted() {
    this.retriveAll();
  },
};
</script>

<style scope>
.block {
  margin-left: 20%;
  width: 50%;
}
.card {
  width: 50%;
}
</style>
